<template>
	<view class="lst-city">
		<view v-if="loading">
			<uv-tabs :list="tabsList" @click="tabsClick" :current="current" lineColor="#B05042" />
			<view class="close" @click="close">
				<uv-icon name="close" color="#CACACA" size="36rpx" bold />
			</view>
			
			<scroll-view scroll-y="true" class="list" :style="{ height: height }">
				<view v-for="(e,i) in newlist" :key="e.id" @click="settabs(e,i)">
					<text :class="['txt', tabsList[current].id == e.id ? 'active' : '']">{{ e.title }}</text>
				</view>
			</scroll-view>
		</view>
		<view v-else class="loading" :style="{ height: height }">
			<uv-loading-icon text="加载中" vertical/>
		</view>
	</view>
</template>
<script setup>
	import { getCityLv3 } from '@/api'
	import { ref, reactive, computed } from 'vue'
	
	const props = defineProps({
		height: {
			type: String,
			default: '50vh',
		},
		item: {
			type: Object,
			default: {},
		}
	})
	
	const emit = defineEmits(['select'])
	
	const current = ref(0)
	const loading = ref(false)
	const tabsList = reactive([
		{ name: '请选择', id: -1, i: 0 },
		{ name: '请选择', id: -1, i: 0 },
		{ name: '请选择', id: -1, i: 0 }
		
	])
	const list = ref([])
	
	const newlist = computed(() => {
		if(current.value == 0) return list.value
		
		if(current.value == 1) return list.value[tabsList[0].i].child
		
		if(current.value == 2) {
			const child = list.value[tabsList[0].i].child
			return child[tabsList[1].i].child
		}
	})
	
	const close = () => {
		const data = { 
			city: tabsList[1].name === '请选择' ? '' : tabsList[1].name,
			area: tabsList[2].name === '请选择' ? '' : tabsList[2].name,
			province: tabsList[0].name === '请选择' ? '' : tabsList[0].name
		}
		emit('select', data)
	}
	
	const tabsClick = (e) => {
		current.value = e.index
		if(e.index == 0) {
			tabsList[1] = { name: '请选择', id: -1, i: 0 }
			tabsList[2] = { name: '请选择', id: -1, i: 0 }
		}
		if(e.index == 1) { 
			tabsList[2] = { name: '请选择', id: -1, i: 0 }
		}
	}
	
	const settabs = (e, index) => {
		tabsList[current.value].i = index
		tabsList[current.value].id = e.id
		tabsList[current.value].name = e.title
		if(current.value != 2) current.value = current.value + 1
		
		
	}
	
	const getCity = async () => {
		const { result } = await getCityLv3()
		list.value = result
		
		const { province, city, area } = props.item
		
		if(province) {
			const i1 = result.findIndex(e => e.title == province)
			tabsList[0].i = i1
			tabsList[0].id = result[i1].id
			tabsList[0].name = result[i1].title
			current.value = 1
			
			if(city) {
				const i2 = result[i1].child.findIndex(e => e.title == city)
				tabsList[1].i = i2
				tabsList[1].id = result[i1].child[i2].id
				tabsList[1].name = result[i1].child[i2].title
				current.value = 2
				
				if(area) {
					const i3 = result[i1].child[i2].child.findIndex(e => e.title == area)
					tabsList[2].i = i3
					tabsList[2].id = result[i1].child[i2].child[i3].id
					tabsList[2].name = result[i1].child[i2].child[i3].title
				}
			}
		} else {
			tabsList[0].id = result[0].id
			tabsList[0].name = result[0].title
		}
		
		loading.value = true
	}
	
	getCity()
</script>
<style lang="scss" scoped>
	.lst-city {
		position: relative;
		.close {
			top: 30rpx;
			right: 30rpx;
			position: absolute;
		}
		.list {
			padding: 20rpx 30rpx;
			.txt {
				color: #333;
				display: block;
				padding: 10rpx 0;
				font-size: 30rpx;
			}
			.active {
				color: #C74A3C;
			}
		}
		.loading {
			display: flex; 
			align-items: center;
			justify-content: center;
		}
	}
	
</style>
